<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 拖动示例</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>

  <p><a href="index.html">Canvas 拖动示例</a > </p>
  <canvas id="canvas" width="800" height="600"></canvas>

    <script>
        // 获取Canvas和绘图上下文
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        // 定义可拖动的圆形
        const circle = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            radius: 50,
            color: '#3498db',
            isDragging: false,
            offsetX: 0,
            offsetY: 0
        };
        
        // 绘制圆形
        function drawCircle() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            ctx.beginPath();
            ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
            ctx.fillStyle = circle.color;
            ctx.fill();
            ctx.closePath();
        }
        
        // 检查点是否在圆内
        function isPointInCircle(x, y) {
            const dx = x - circle.x;
            const dy = y - circle.y;
            return dx * dx + dy * dy <= circle.radius * circle.radius;
        }
        
        // 触摸开始事件
        canvas.addEventListener('touchstart', (e) => {
            e.preventDefault(); // 阻止页面滚动
            
            const touch = e.touches[0];
            const rect = canvas.getBoundingClientRect();
            const touchX = touch.clientX - rect.left;
            const touchY = touch.clientY - rect.top;
            
            if (isPointInCircle(touchX, touchY)) {
                circle.isDragging = true;
                circle.offsetX = circle.x - touchX;
                circle.offsetY = circle.y - touchY;
            }
        });
        
        // 触摸移动事件
        canvas.addEventListener('touchmove', (e) => {
            e.preventDefault(); // 阻止页面滚动
            
            if (!circle.isDragging) return;
            
            const touch = e.touches[0];
            const rect = canvas.getBoundingClientRect();
            const touchX = touch.clientX - rect.left;
            const touchY = touch.clientY - rect.top;
            
            // 更新圆形位置
            circle.x = touchX + circle.offsetX;
            circle.y = touchY + circle.offsetY;
            
            // 重绘
            drawCircle();
        });
        
        // 触摸结束事件
        canvas.addEventListener('touchend', () => {
            circle.isDragging = false;
        });
        
        // 初始绘制
        drawCircle();

        // 边界限制
function constrain(value, min, max) {
    return Math.max(min, Math.min(max, value));
}

// 鼠标事件支持
canvas.addEventListener('mousedown', (e) => {
    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;
    
    if (isPointInCircle(mouseX, mouseY)) {
        circle.isDragging = true;
        circle.offsetX = circle.x - mouseX;
        circle.offsetY = circle.y - mouseY;
    }
});

canvas.addEventListener('mousemove', (e) => {
    if (!circle.isDragging) return;
    
    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;
    
    // 边界限制
    circle.x = constrain(mouseX + circle.offsetX, circle.radius, canvas.width - circle.radius);
    circle.y = constrain(mouseY + circle.offsetY, circle.radius, canvas.height - circle.radius);
    
    drawCircle();
});

canvas.addEventListener('mouseup', () => {
    circle.isDragging = false;
});

canvas.addEventListener('mouseleave', () => {
    circle.isDragging = false;
});
    </script>
</body>
</html>
